<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三分法阅读书单 - 学习管理SOP表格</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/lucide@latest"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Source+Han+Sans+CN:wght@300;400;700&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        'highlight-bg': '#EFF6FF',
                        'highlight-text': '#1E40AF',
                    }
                }
            }
        }
    </script>
    <style>
        :root {
            --theme-primary: #3B82F6;
            --theme-secondary: #10B981;
            --highlight-bg: #EFF6FF;
            --highlight-text: #1E40AF;
        }
        body {
            font-family: 'Source Han Sans CN', sans-serif;
            font-weight: 300;
        }
        h1, h2, h3, blockquote {
            font-family: 'Noto Serif SC', serif;
        }
        .magazine-page {
            width: 700px;
            background: #fefefe;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            min-height: auto;
        }
        .dark .magazine-page {
            background: #111827;
        }
        .dark p {
            color: #d1d5db;
        }
        .dark h1, .dark h2, .dark h3 {
            color: #f9fafb;
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4em;
            line-height: 0.8;
            margin: 0.1em 0.1em 0 0;
            font-weight: 700;
            font-family: 'Noto Serif SC', serif;
        }
        .breathing-space {
            letter-spacing: 0.05em;
            line-height: 1.8;
        }
        .sop-table {
            border-collapse: collapse;
            width: 100%;
            margin-bottom: 1.5rem;
        }
        .sop-table th, .sop-table td {
            border: 1px solid #e5e7eb;
            padding: 0.75rem;
            text-align: left;
        }
        .sop-table th {
            background-color: #f9fafb;
            font-weight: 600;
        }
        .editable {
            min-height: 40px;
            padding: 0.5rem;
            border: 1px dashed #d1d5db;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
        }
        .editable:focus {
            outline: none;
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            background-color: #f8fafc;
        }
        .sop-card {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        .sop-card h3 {
            color: #1e40af;
            border-bottom: 2px solid #e5e7eb;
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        .method-explanation {
            background-color: #f0f9ff;
            border-left: 4px solid #3b82f6;
            padding: 1rem;
            margin-bottom: 1.5rem;
            border-radius: 0 0.5rem 0.5rem 0;
        }
        .input-hint {
            font-size: 0.75rem;
            color: #6b7280;
            margin-top: 0.25rem;
        }
        .save-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #10b981;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .save-indicator.show {
            opacity: 1;
        }
        .export-buttons {
            display: flex;
            justify-content: flex-end;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            flex-wrap: wrap;
        }
        .export-btn {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            font-weight: 500;
            transition: all 0.3s ease;
            cursor: pointer;
            border: none;
        }
        .export-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
        }
        .loading-overlay.show {
            opacity: 1;
            visibility: visible;
        }
        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .book-list-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 0.75rem;
            padding: 0.75rem;
            border-radius: 0.375rem;
            transition: all 0.2s;
        }
        .book-list-item:hover {
            background-color: #f8fafc;
        }
        .book-number {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 1.5rem;
            height: 1.5rem;
            background-color: #3b82f6;
            color: white;
            border-radius: 50%;
            font-size: 0.75rem;
            margin-right: 0.75rem;
            flex-shrink: 0;
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-800 flex items-center justify-center min-h-screen p-4 md:p-8">
    <article class="magazine-page shadow-2xl p-8">
        <!-- 页面头部 -->
        <header class="mb-8">
            <h1 class="text-3xl font-bold leading-tight mb-2 relative">
                <span class="absolute left-0 -top-2 bottom-2 w-1.5 bg-primary rounded-full"></span>
                <span class="ml-6">三分法阅读书单</span>
            </h1>
            <p class="text-lg text-gray-600 dark:text-gray-400 font-light ml-6">科学管理您的阅读计划，提升阅读效率</p>
        </header>

        <!-- 方法说明 -->
        <div class="method-explanation">
            <h3 class="font-bold text-primary mb-2">方法简介</h3>
            <p class="text-gray-700">三分法阅读书单将您的阅读材料分为三类：每日必读、必要时阅读和一次性阅读，帮助您建立科学的阅读体系，合理分配阅读时间和精力。</p>
        </div>

        <!-- 导出按钮 -->
        <div class="export-buttons">
            <button id="export-pdf" class="export-btn bg-red-500 hover:bg-red-600 text-white">
                <i data-lucide="file-text" class="w-5 h-5 mr-2"></i>
                导出为PDF
            </button>
            <button id="export-doc" class="export-btn bg-blue-500 hover:bg-blue-600 text-white">
                <i data-lucide="download" class="w-5 h-5 mr-2"></i>
                导出为文档
            </button>
        </div>

        <!-- 三分法阅读书单表格 -->
        <div id="sop-content">
            <!-- 每日阅读书单 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="sun" class="w-6 h-6 mr-2 text-yellow-500"></i>
                    Daily Reading List 每天阅读书单
                </h3>
                
                <div class="mb-4">
                    <p class="text-gray-700 mb-4">这些是您每天需要坚持阅读的材料，通常包括行业资讯、专业期刊、经典著作等，帮助您保持知识更新和专业敏感度。</p>
                </div>
                
                <div class="mb-4">
                    <div class="editable daily-reading-list h-48" contenteditable="true" data-placeholder="1. 《原则》- 每天阅读10页&#10;2. 行业资讯日报 - 每天早晨阅读&#10;3. 《思考，快与慢》- 睡前阅读15分钟&#10;4. 专业博客更新 - 午休时间阅读"></div>
                    <div class="input-hint">每行输入一本书或阅读材料，格式：序号. 书名/材料 - 阅读计划</div>
                </div>
                
                <div class="mt-4 p-4 bg-green-50 rounded-lg">
                    <h4 class="font-bold text-green-800 mb-2 flex items-center">
                        <i data-lucide="lightbulb" class="w-4 h-4 mr-2"></i>
                        使用建议
                    </h4>
                    <ul class="text-green-700 text-sm list-disc pl-5 space-y-1">
                        <li>选择3-5种材料，确保每天总阅读时间在1小时左右</li>
                        <li>优先选择与您当前工作或学习目标直接相关的材料</li>
                        <li>固定阅读时间，养成习惯</li>
                        <li>定期评估和更新书单内容</li>
                    </ul>
                </div>
            </div>
            
            <!-- 必要时向场合阅读书单 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="alert-circle" class="w-6 h-6 mr-2 text-orange-500"></i>
                    Reading list for necessary time occasions 必要时向场合阅读书单
                </h3>
                
                <div class="mb-4">
                    <p class="text-gray-700 mb-4">这些是在特定情境下需要参考的阅读材料，如项目准备、问题解决、技能提升等，帮助您在关键时刻找到所需知识。</p>
                </div>
                
                <div class="mb-4">
                    <div class="editable necessary-reading-list h-48" contenteditable="true" data-placeholder="1. 《项目管理知识体系指南》- 启动新项目时参考&#10;2. 《谈判力》- 重要商务谈判前复习&#10;3. 《金字塔原理》- 准备重要报告时参考&#10;4. 《高效能人士的七个习惯》- 职业发展遇到瓶颈时阅读"></div>
                    <div class="input-hint">每行输入一本书或阅读材料，格式：序号. 书名/材料 - 适用情境</div>
                </div>
                
                <div class="mt-4 p-4 bg-blue-50 rounded-lg">
                    <h4 class="font-bold text-blue-800 mb-2 flex items-center">
                        <i data-lucide="lightbulb" class="w-4 h-4 mr-2"></i>
                        使用建议
                    </h4>
                    <ul class="text-blue-700 text-sm list-disc pl-5 space-y-1">
                        <li>按主题或情境分类整理，便于快速查找</li>
                        <li>标注每本书的核心应用场景</li>
                        <li>定期回顾和更新，确保内容相关性</li>
                        <li>建立索引或标签系统，提高检索效率</li>
                    </ul>
                </div>
            </div>
            
            <!-- 读一次就够了的书单 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="check-circle" class="w-6 h-6 mr-2 text-green-500"></i>
                    A list of books to read once is enough 读一次就够了的书单
                </h3>
                
                <div class="mb-4">
                    <p class="text-gray-700 mb-4">这些是您已经阅读过或只需了解核心概念的书籍，可以作为参考资料，无需反复阅读。</p>
                </div>
                
                <div class="mb-4">
                    <div class="editable once-reading-list h-48" contenteditable="true" data-placeholder="1. 《时间简史》- 已阅读，了解核心概念即可&#10;2. 《国富论》- 大学时已学习，作为参考资料&#10;3. 《红楼梦》- 已完整阅读，无需重读&#10;4. 《人类简史》- 已掌握核心观点，偶尔参考"></div>
                    <div class="input-hint">每行输入一本书或阅读材料，格式：序号. 书名/材料 - 备注/状态</div>
                </div>
                
                <div class="mt-4 p-4 bg-purple-50 rounded-lg">
                    <h4 class="font-bold text-purple-800 mb-2 flex items-center">
                        <i data-lucide="lightbulb" class="w-4 h-4 mr-2"></i>
                        使用建议
                    </h4>
                    <ul class="text-purple-700 text-sm list-disc pl-5 space-y-1">
                        <li>记录阅读状态和核心收获</li>
                        <li>标注是否可以作为参考资料</li>
                        <li>定期清理，移除不再相关的书籍</li>
                        <li>可以考虑将纸质书数字化，节省空间</li>
                    </ul>
                </div>
            </div>
            
            <!-- 阅读计划与跟踪 -->
            <div class="sop-card">
                <h3 class="text-xl font-bold flex items-center">
                    <i data-lucide="calendar" class="w-6 h-6 mr-2 text-indigo-500"></i>
                    阅读计划与跟踪
                </h3>
                
                <div class="mb-4">
                    <p class="text-gray-700 mb-4">制定您的阅读计划，跟踪阅读进度，确保阅读目标的实现。</p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">月度阅读目标</h4>
                        <div class="editable monthly-goal h-24" contenteditable="true" data-placeholder="• 完成《原则》阅读&#10;• 学习3篇行业深度报告&#10;• 精读《思考，快与慢》关键章节"></div>
                    </div>
                    
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">阅读进度跟踪</h4>
                        <div class="editable reading-progress h-24" contenteditable="true" data-placeholder="• 《原则》：已读120/300页&#10;• 行业报告：已完成2/3篇&#10;• 《思考，快与慢》：已标记重点章节"></div>
                    </div>
                </div>
                
                <div class="mt-6">
                    <h4 class="font-medium text-gray-700 mb-2">阅读心得与反思</h4>
                    <div class="editable reading-reflection h-32" contenteditable="true" data-placeholder="记录阅读过程中的收获、启发和应用想法..."></div>
                </div>
            </div>
            
            <!-- 使用提示 -->
            <div class="sop-card bg-yellow-50 border border-yellow-200">
                <h3 class="text-lg font-bold text-yellow-800 flex items-center">
                    <i data-lucide="lightbulb" class="w-5 h-5 mr-2"></i>
                    使用提示
                </h3>
                <ul class="text-yellow-700 text-sm list-disc pl-5 space-y-1">
                    <li>定期（如每季度）回顾和更新三个书单的内容</li>
                    <li>根据实际阅读情况调整每日阅读书单</li>
                    <li>必要时向书单应与您的工作和学习目标紧密相关</li>
                    <li>读一次就够了的书单可以帮助您释放心理压力，专注于重要内容</li>
                    <li>结合阅读计划与跟踪部分，确保阅读目标的实现</li>
                </ul>
            </div>
        </div>

        <!-- 页面底部信息 -->
        <div class="flex items-center text-green-600 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700">
            <i data-lucide="check-circle" class="w-5 h-5 mr-2"></i>
            <span>三分法阅读书单 · 学习管理SOP表格</span>
        </div>
        
        <!-- 保存提示 -->
        <div id="save-indicator" class="save-indicator">
            <i data-lucide="check" class="w-4 h-4 mr-1 inline"></i>
            内容已自动保存
        </div>
        
        <!-- 加载遮罩 -->
        <div id="loading-overlay" class="loading-overlay">
            <div class="bg-white p-6 rounded-lg shadow-xl flex flex-col items-center">
                <div class="loading-spinner mb-4"></div>
                <p class="text-gray-700">正在生成文件，请稍候...</p>
            </div>
        </div>
    </article>

    <script>
        // 初始化Lucide图标
        lucide.createIcons();
        
        // 设置占位符文本
        document.querySelectorAll('.editable').forEach(editable => {
            const placeholder = editable.getAttribute('data-placeholder');
            if (placeholder && !editable.textContent.trim()) {
                editable.textContent = placeholder;
                editable.classList.add('text-gray-400');
            }
            
            editable.addEventListener('focus', function() {
                if (this.textContent === this.getAttribute('data-placeholder')) {
                    this.textContent = '';
                    this.classList.remove('text-gray-400');
                }
            });
            
            editable.addEventListener('blur', function() {
                if (!this.textContent.trim()) {
                    this.textContent = this.getAttribute('data-placeholder');
                    this.classList.add('text-gray-400');
                }
            });
            
            // 自动保存功能
            editable.addEventListener('input', function() {
                clearTimeout(this.saveTimeout);
                this.saveTimeout = setTimeout(() => {
                    showSaveIndicator();
                }, 1000);
            });
        });
        
        // 显示保存提示
        function showSaveIndicator() {
            const indicator = document.getElementById('save-indicator');
            indicator.classList.add('show');
            setTimeout(() => {
                indicator.classList.remove('show');
            }, 2000);
        }
        
        // 显示加载遮罩
        function showLoadingOverlay() {
            const overlay = document.getElementById('loading-overlay');
            overlay.classList.add('show');
        }
        
        // 隐藏加载遮罩
        function hideLoadingOverlay() {
            const overlay = document.getElementById('loading-overlay');
            overlay.classList.remove('show');
        }
        
        // 导出为PDF功能
        document.getElementById('export-pdf').addEventListener('click', function() {
            showLoadingOverlay();
            
            const { jsPDF } = window.jspdf;
            
            // 获取要导出的内容
            const element = document.getElementById('sop-content');
            
            // 临时移除占位符文本
            document.querySelectorAll('.editable').forEach(editable => {
                if (editable.textContent === editable.getAttribute('data-placeholder')) {
                    editable.textContent = '';
                }
            });
            
            // 使用html2canvas将内容转换为图片
            html2canvas(element, {
                scale: 2,
                useCORS: true,
                logging: false
            }).then(canvas => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jsPDF('p', 'mm', 'a4');
                const imgWidth = 190; // 页面宽度
                const pageHeight = 277; // A4高度
                const imgHeight = canvas.height * imgWidth / canvas.width;
                let heightLeft = imgHeight;
                let position = 10;
                
                pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                heightLeft -= pageHeight;
                
                // 如果内容超过一页，添加新页面
                while (heightLeft >= 0) {
                    position = heightLeft - imgHeight + 10;
                    pdf.addPage();
                    pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
                    heightLeft -= pageHeight;
                }
                
                pdf.save('三分法阅读书单表格.pdf');
                
                // 恢复占位符文本
                document.querySelectorAll('.editable').forEach(editable => {
                    if (!editable.textContent.trim()) {
                        editable.textContent = editable.getAttribute('data-placeholder');
                        editable.classList.add('text-gray-400');
                    }
                });
                
                hideLoadingOverlay();
            }).catch(error => {
                console.error('PDF导出错误:', error);
                hideLoadingOverlay();
                alert('PDF导出失败，请重试');
            });
        });

        // 导出为文档功能
        document.getElementById('export-doc').addEventListener('click', function() {
            showLoadingOverlay();
            
            try {
                // 创建一个临时的div来保存格式化内容
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = document.getElementById('sop-content').innerHTML;
                
                // 获取所有可编辑区域的内容
                const editables = tempDiv.querySelectorAll('[contenteditable="true"]');
                editables.forEach(editable => {
                    // 移除contenteditable属性
                    editable.removeAttribute('contenteditable');
                    // 如果内容是占位符，清空
                    if (editable.textContent === editable.getAttribute('data-placeholder')) {
                        editable.textContent = '';
                    }
                    // 添加样式以保持格式
                    editable.style.border = '1px solid #ddd';
                    editable.style.padding = '8px';
                    editable.style.minHeight = '40px';
                    editable.style.marginBottom = '10px';
                    editable.style.whiteSpace = 'pre-line';
                });
                
                // 创建HTML内容
                const htmlContent = `
                    <!DOCTYPE html>
                    <html>
                    <head>
                        <meta charset="UTF-8">
                        <title>三分法阅读书单表格</title>
                        <style>
                            body { 
                                font-family: 'Source Han Sans CN', sans-serif; 
                                margin: 20px;
                                color: #333;
                            }
                            h1, h2, h3 { 
                                font-family: 'Noto Serif SC', serif; 
                                color: #1e40af;
                            }
                            h1 { font-size: 24px; border-bottom: 2px solid #1e40af; padding-bottom: 10px; }
                            h3 { font-size: 18px; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; }
                            .sop-table { 
                                border-collapse: collapse; 
                                width: 100%; 
                                margin-bottom: 20px; 
                            }
                            .sop-table th, .sop-table td { 
                                border: 1px solid #ddd; 
                                padding: 12px; 
                                text-align: left; 
                                vertical-align: top;
                            }
                            .sop-table th { 
                                background-color: #f2f2f2; 
                                font-weight: 600;
                                text-align: center;
                            }
                            .sop-card { 
                                margin-bottom: 30px; 
                                padding: 20px; 
                                border: 1px solid #ddd; 
                                border-radius: 5px; 
                            }
                            .method-explanation {
                                background-color: #f0f9ff;
                                border-left: 4px solid #3b82f6;
                                padding: 15px;
                                margin-bottom: 20px;
                            }
                        </style>
                    </head>
                    <body>
                        <h1>三分法阅读书单</h1>
                        <div class="method-explanation">
                            <h3>方法简介</h3>
                            <p>三分法阅读书单将您的阅读材料分为三类：每日必读、必要时阅读和一次性阅读，帮助您建立科学的阅读体系，合理分配阅读时间和精力。</p>
                        </div>
                        ${tempDiv.innerHTML}
                    </body>
                    </html>
                `;
                
                // 创建Blob并下载
                const blob = new Blob([htmlContent], { type: 'application/msword' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = '三分法阅读书单表格.doc';
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
                URL.revokeObjectURL(url);
                
                hideLoadingOverlay();
            } catch (error) {
                console.error('文档导出错误:', error);
                hideLoadingOverlay();
                alert('文档导出失败，请重试');
            }
        });
    </script>
</body>
</html>